<template>
  <!--在登录或者注册页面利用v-show隐藏底部false  -->
  <div
    class="footerWrap"
    v-if="
      $route.path != '/login' &&
        $route.path != '/reg' &&
        $route.path != '/details' &&
        $route.path != '/show' &&
        $route.path != '/Search' &&
        $route.path != '/failed' &&
        $route.path != '/address' &&
        $route.path != '/order'
    "
  >
    <ul>
      <!-- <ul> -->
      <li
        v-for="item in list"
        :key="item.id"
        :class="{ active: currentPath == item.path }"
        @click="change(item.path)"
      >
        <van-icon :name="item.icon" size="20" />
        <router-link
          :to="item.path"
          :class="{ active: currentPath == item.path }"
          @click="change(item.path)"
          tag="li"
          >{{ item.name }}</router-link
        >
      </li>
    </ul>
  </div>
</template>

<script>
import { setCookie, getCookie } from "../utils/auth";
import goodsApi from "../api/goodsApi";
// console.log(setCookie,getCookie);
export default {
  data() {
    return {
      active: "",
      currentPath: "",
      list: [
        {
          id: 1,
          name: "首页",
          path: "/home",
          icon: "wap-home-o"
        },
        {
          id: 2,
          name: "分类",
          path: "/list",
          icon: "apps-o"
        },
        {
          id: 3,
          name: "限时特卖",
          path: "/sale",
          icon: "fire-o"
        },
        {
          id: 4,
          name: "购物车",
          path: "/cart",
          icon: "shopping-cart-o"
        },
        {
          id: 5,
          name: "我的",
          path: "/user",
          icon: "contact"
        }
      ]
    };
  },

  components: {},
  created() {
    // this.currentPath="/home"
    // this.currentPath = getCookie("path");
    // this.currentPath = this.$store.state.currentPath;
    // console.log(this.$store.state.currentPath,555);
  },
  methods: {
    change(path) {
      // console.log(path);
      this.currentPath = path; //高亮
      goodsApi
        .getGoods({ category: `1` })
        .then(res => {
          //console.log(res.data);
          localStorage.setItem("classify", JSON.stringify(res.data.data));
        })
        .catch(err => {
          console.log(err);
        });
      // this.$store.state.currentPath = path;
      // setCookie("path", path, 7);
      // console.log(this.$store.state.currentPath,555);
      // this.$route.state.currentPath
    }
  },

  watch: {
    //监听路由变化
    $route: {
      deep: true,
      handler(newRoute) {
        //console.log(newRoute.path, 89898);
        //localStorage.getItem("zz",)
        this.currentPath = newRoute.path;
        //判断path 设置强行高亮
        if (newRoute.path == "/list/1") {
          this.currentPath = "/list";
        } else if (newRoute.path == "/list/2") {
          this.currentPath = "/list";
        } else if (newRoute.path == "/list/3") {
          this.currentPath = "/list";
        } else if (newRoute.path == "/list/4") {
          this.currentPath = "/list";
        } else {
          this.currentPath = newRoute.path;
        }
      }
    }
  }
};
</script>

<style scoped lang="scss">
@import "@/assets/sass/common.scss";
@import "@/assets/sass/vw.scss";
li.active {
  color: lightcoral;
}
.footerWrap {
  width: vw(750);
  height: vw(100);
  position: fixed;
  left: 0;
  bottom: 0;

  background-color: white;
  border-top: vw(2) solid #e5e5e5;
  ul {
    display: flex;
    justify-content: space-around;
    padding-top: vw(18);
    li {
      display: flex;
      height: vw(100);
      flex-direction: column;
      font-size: vw(26);
      text-align: center;
    }
  }
}
</style>
